<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ItemformAPI</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrapEx.css">
    <link rel="stylesheet" href="../js/prettyPrint/css/prettify.css">
    <link rel="stylesheet" href="api.css">


    <script src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/prettyPrint/js/prettify.js"></script>
</head>

<body onload="prettyPrint()">
    <div class="container-fluid">
        <div class="">
            <div class="span12">
                <h1>属性</h1>
                <hr/>
            </div>
            <div class="">
                <h3>bsEx.ItemForm </h3>
                <div>
                    <h3>注</h3>
                    <pre class="prettyprint"><code>表单主体布局及部分方法属性来自底层<a href="https://github.com/xiexingen/Bootstrap-SmartForm" target="_black">Bootstrap-SmartForm</a>插件，并在此之上修改(由于修改了源码，不能随便替换);
表单dropdownlist(下拉)控件来自<a href="http://silviomoreto.github.io/bootstrap-select/" target="_black">bootstrap-select</a>插件(没有修改插件源码);
表单datetime(时间)控件来自<a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" target="_black">bootstrap-datetimepicker</a>插件(没有修改插件源码)</code> </pre>
                    <hr>
                </div>
                添加引用
                <pre class="prettyprint linenums"><code> &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrap.min.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/from/bootstrap-datetimepicker.min.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/from/bootstrap-select.css&quot;&gt;
 &lt;link rel=&quot;stylesheet&quot; href=&quot;../../css/bootstrapEx.css&quot;&gt;
 
 &lt;script src=&quot;../../js/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/from/global.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/from/jquery.smart-form.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/from/bootstrap-datetimepicker.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/from/bootstrap-datetimepicker.zh-CN.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/from/bootstrap-select.js&quot; charset=&quot;UTF-8&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
 &lt;script type=&quot;text/javascript&quot; src=&quot;../../js/bootstrapEx2.0.js&quot;&gt;&lt;/script&gt;</code></pre>
                <p>继承自bsEx.ui.base:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">id</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">bsEx.getId()</div>
                        <div class="col-xs-5 col-sm-5">控件ID</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">renderto</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">无(必填)</div>
                        <div class="col-xs-5 col-sm-5">绘制到容器的对象或选择器</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">type</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">ItemForm</div>
                        <div class="col-xs-5 col-sm-5">控件类型</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">firstInit</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">第一次加载是否完成</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">language</div>
                        <div class="col-xs-2 col-sm-2">bsEx.language</div>
                        <div class="col-xs-3 col-sm-3">bsEx.language.zhCN</div>
                        <div class="col-xs-5 col-sm-5">当前语言包</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">cls</div>
                        <div class="col-xs-3 col-sm-3">string</div>
                        <div class="col-xs-3 col-sm-3">""</div>
                        <div class="col-xs-3 col-sm-3">自定义样式 在绘制之前会在renderto加入该样式</div>
                    </div>
                </div>
                <p>控件实例属性:</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-2 col-sm-2">属性名称</div>
                        <div class="col-xs-2 col-sm-2">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-5 col-sm-5">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">items</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">表单项集合</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">readonly</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">只读的表单项集合</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">requireds</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">[]</div>
                        <div class="col-xs-5 col-sm-5">验证的表单项集合</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">colunb</div>
                        <div class="col-xs-2 col-sm-2">number</div>
                        <div class="col-xs-3 col-sm-3">1</div>
                        <div class="col-xs-5 col-sm-5">列数</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">showlabel</div>
                        <div class="col-xs-2 col-sm-2">bool</div>
                        <div class="col-xs-3 col-sm-3">true</div>
                        <div class="col-xs-5 col-sm-5">是否显示title</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">BSForm</div>
                        <div class="col-xs-2 col-sm-2">BSForm</div>
                        <div class="col-xs-3 col-sm-3">{}</div>
                        <div class="col-xs-5 col-sm-5">底层插件<a href="https://github.com/xiexingen/Bootstrap-SmartForm" target="_black">Bootstrap-SmartForm</a>对象,通过此对象执行插件方法 </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">BSFormop</div>
                        <div class="col-xs-2 col-sm-2">object</div>
                        <div class="col-xs-3 col-sm-3">{}</div>
                        <div class="col-xs-5 col-sm-5">底层插件<a href="https://github.com/xiexingen/Bootstrap-SmartForm" target="_black">Bootstrap-SmartForm</a>参数</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">autoLayout</div>
                        <div class="col-xs-2 col-sm-2">数组[]</div>
                        <div class="col-xs-3 col-sm-3">['1,11', '1,5', '1,3', '1,2', '1,2,1,2,1,2,1,2']</div>
                        <div class="col-xs-5 col-sm-5">行布局集合，分别对应1-5列布局</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">validate</div>
                        <div class="col-xs-2 col-sm-2">boolean</div>
                        <div class="col-xs-3 col-sm-3">false</div>
                        <div class="col-xs-5 col-sm-5">是否启用验证</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">depopover</div>
                        <div class="col-xs-2 col-sm-2">object</div>
                        <div class="col-xs-3 col-sm-3">{}</div>
                        <div class="col-xs-5 col-sm-5">验证提示的配置</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-2 col-sm-2">valmsg</div>
                        <div class="col-xs-2 col-sm-2">string</div>
                        <div class="col-xs-3 col-sm-3">"请填写"</div>
                        <div class="col-xs-5 col-sm-5">验证提示文字前回加上valmsg</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code> //创建控件
 form1 = new bsEx.ItemForm("#itemForm1");
 //表单项
 form1.items = [
     { type: 'text', name: 'taskCode', title: '单号' },
     { type: 'datetime', name: 'taskMakedate', title: '制单日期' },
     { type: 'select', name: 'taskMakeuser', title: '制单人', select: { data: userdata, tree: false } },
     { type: 'select', name: 'taskMakedep', title: '制单部门', select: { data: depdata, tree: true } },
     { type: 'numbertxt', name: 'tasknub', title: '数量',validate:true },
     { type: 'floattxt', name: 'taskprice', title: '价格' },
     { type: 'textarea', name: 'taskfield1', title: '备注', oneline: true }
 ];
 //需要验证的字段
 form1.requireds = ["taskCode","tasknub"];
 //是否启用验证
 form1.validate = true;
 //弹出验证提示配置
 form1.depopover = {placement:"auto top"};
 //生成几列
 form1.colunb = 4;//列数
 //开始绘制
 form1.init();</code> </pre>
                <hr/>
            </div>
            <div class="">
                    <h3>bsEx.ItemForm.items </h3>
                    <p>表单项</p>
                    <div class="table">
                        <div class="row title">
                            <div class="col-xs-2 col-sm-2">属性名称</div>
                            <div class="col-xs-2 col-sm-2">类型</div>
                            <div class="col-xs-3 col-sm-3">默认值</div>
                            <div class="col-xs-5 col-sm-5">备注说明</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">type</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">表单项类型 text|datetime|textarea|numbertxt|floattxt|select|hides</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">title</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">表单项显示标题</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">name</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">无</div>
                            <div class="col-xs-5 col-sm-5">表单项名称唯一标识</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">oneline</div>
                            <div class="col-xs-2 col-sm-2">boolean</div>
                            <div class="col-xs-3 col-sm-3">false</div>
                            <div class="col-xs-5 col-sm-5">是否单独一行</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">height</div>
                            <div class="col-xs-2 col-sm-2">string</div>
                            <div class="col-xs-3 col-sm-3">""</div>
                            <div class="col-xs-5 col-sm-5">type:textarea独有属性，调整高度</div>
                        </div>
                        <div class="row">
                            <div class="col-xs-2 col-sm-2">select</div>
                            <div class="col-xs-2 col-sm-2">bsEx.Dropdownlist</div>
                            <div class="col-xs-3 col-sm-3">{}</div>
                            <div class="col-xs-5 col-sm-5">下拉控件属性，type为select类型时生效</div>
                        </div>
                    </div>
                    <h4>示例</h4>
                    <pre class="prettyprint linenums"><code> form1.items = [
     { type: 'text', name: 'taskCode', title: '单号' },
     { type: 'datetime', name: 'taskMakedate', title: '制单日期' },
     { type: 'select', name: 'taskMakeuser', title: '制单人', select: { data: userdata, tree: false } },
     { type: 'select', name: 'taskMakedep', title: '制单部门', select: { data: depdata, tree: true } },
     { type: 'numbertxt', name: 'tasknub', title: '数量' },
     { type: 'floattxt', name: 'taskprice', title: '价格' },
     { type: 'textarea', name: 'taskfield1', title: '备注', oneline: true,height:'200px' }
 ];</code> </pre>
                    <hr/>
                </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>方法</h1>
                <hr/>
            </div>
            <div class="">
                <h3>init() <small>返回类型: 无</small></h3>
                <p>绘制方法</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>doLayout() <small>返回类型: 无</small></h3>
                <p>重置表单布局，处理只读样式</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>getFormData() <small>返回类型: object</small></h3>
                <p>返回表单值，格式为{bsEx.ItemForm.items.name:value,...}</p>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>setFormData(model) <small>返回类型: 无</small></h3>
                <p>设置表单值,使用底层BSForm方法</p>
                <div class="table">
                       <div class="row title">
                           <div class="col-xs-3 col-sm-3">参数名称</div>
                           <div class="col-xs-3 col-sm-3">类型</div>
                           <div class="col-xs-3 col-sm-3">默认值</div>
                           <div class="col-xs-3 col-sm-3">备注说明</div>
                       </div>
                       <div class="row">
                           <div class="col-xs-3 col-sm-3">model</div>
                           <div class="col-xs-3 col-sm-3">object</div>
                           <div class="col-xs-3 col-sm-3">无(必填)</div>
                           <div class="col-xs-3 col-sm-3">值对象 格式为{bsEx.ItemForm.items.name:value,...}</div>
                       </div>
                   </div>
               <h4>示例</h4>
               <pre class="prettyprint linenums"><code> var data = {
     "taskCode": "20170101",//单号
     "taskMakedate": "2017-01-01",//日期
     "taskMakeuser": "2",//人员
     "taskMakedep": "1",//部门
     "tasknub": "30",//数量
     "taskprice": "3",//价格
     "taskfield1": "赚了好几万"//备注
 };
 form1.setFormData(data);</code> </pre>
               <hr/>
            </div>
            <div class="">
                <h3>valid() <small>返回类型: 无</small></h3>
                <p>执行表单验证</p>
               <h4>示例</h4>
               <pre class="prettyprint linenums"><code>略</code> </pre>
               <hr/>
            </div>
        </div>
        <div class="">
            <div class="span12">
                <h1>事件</h1>
                <hr/>
            </div>
            <div class="">
                <h3>beforeinit(t) <small>返回类型: 无</small></h3>
                <p>绘制前事件，执行init()后第一个执行，可以对实例进行操作影响init执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
            <div class="">
                <h3>inited(t) <small>返回类型: 无</small></h3>
                <p>绘制后事件，执行init()后执行</p>
                <div class="table">
                    <div class="row title">
                        <div class="col-xs-3 col-sm-3">参数名称</div>
                        <div class="col-xs-3 col-sm-3">类型</div>
                        <div class="col-xs-3 col-sm-3">默认值</div>
                        <div class="col-xs-3 col-sm-3">备注说明</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3 col-sm-3">t</div>
                        <div class="col-xs-3 col-sm-3">object</div>
                        <div class="col-xs-3 col-sm-3">无</div>
                        <div class="col-xs-3 col-sm-3">控件实例</div>
                    </div>
                </div>
                <h4>示例</h4>
                <pre class="prettyprint linenums"><code>略</code> </pre>
                <hr/>
            </div>
        </div>
</body>
<script>
      $(document).ready(function () {
          $.each($(".table").find(".row div"),function(i,t){
              $(t).removeClass("col-xs-3 col-sm-3");
          });
          $.each($(".table").find(".row"),function(i,t){
              $(t).find("div").eq(0).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(1).addClass("col-xs-2 col-sm-2");
              $(t).find("div").eq(2).addClass("col-xs-3 col-sm-3");
              $(t).find("div").eq(3).addClass("col-xs-5 col-sm-5");
          });
      });
</script>
</html>